<!-- 花名创建与修改 -->
<template>
	<view v-if="show" class="mask flex justify-center align-center" @click="$emit('cancel')">
		<view class="car" @click.stop>
			<view class="wenan flex justify-center align-center flex-column">
				<view v-if="status==1" class="icon flex justify-center align-center ">
					<image src="https://sanfuzhide.oss-cn-hangzhou.aliyuncs.com/test/wen3.png" mode=""></image>
				</view>
				<view v-if="status==0" class="icon1 flex justify-center align-center">
					<image src="https://sanfuzhide.oss-cn-hangzhou.aliyuncs.com/test/wen2.png" mode=""></image>
				</view>
				<view v-if="status==0" class="icon2 flex justify-center align-center">
					<image src="https://sanfuzhide.oss-cn-hangzhou.aliyuncs.com/test/wen1.png" mode=""></image>
				</view>
			</view>
			<view class="touxiang flex justify-center align-center">
				<view class="coun flex align-center">
					<view class="left">
						选择头像
					</view>
					<view class="right flex align-center">
						<view v-if="active == 0" class="borde" >
							<view class="ic">
								<image :src="ims[0]" mode=""></image>
							</view>
						</view>
						<view v-if="active != 0" class="ico" @click="change(0)">
							<image :src="ims[0]" mode=""></image>
						</view>
						<view v-if="active == 1" class="borde">
							<view class="ic">
								<image :src="ims[1]" mode=""></image>
							</view>
						</view>
						<view v-if="active != 1" class="ico" @click="change(1)">
							<image :src="ims[1]" mode=""></image>
						</view>
						<view v-if="active == 2" class="borde">
							<view class="ic">
								<image :src="ims[2]" mode=""></image>
							</view>
						</view>
						<view v-if="active != 2" class="ico" @click="change(2)">
							<image :src="ims[2]" mode=""></image>
						</view>
						<view v-if="active == 3" class="borde">
							<view class="ic">
								<image :src="ims[3]" mode=""></image>
							</view>
						</view>
						<view v-if="active != 3" class="ico" @click="change(3)">
							<image :src="ims[3]" mode=""></image>
						</view>
					</view>
				</view>
			</view>
			<view class="huaname flex align-center">
				<view class="tinm flex align-center">
					<view class="label flex align-center flex-shrink">
						你的花名
					</view>
					<view class="input flex align-center">
						<input type="text" v-model="nameQurey.flowerName" placeholder="输入您的花名" />
					</view>
				</view>
			</view>
			<view class="notice">
				花名创建后一年之内不能更改哦~请三思
			</view>
			<view class="botton flex justify-center align-center">
				<view class="zuo flex justify-center align-center" @click="$emit('cancel')">
					取消
				</view>
				<view class="you flex justify-center align-center" @click="submit">
					{{status == 0 ? '立即创建' : '立即修改'}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"flower",
		props:{
			show: Boolean,
			status: Number,
			flowerr: String
		},
		data() {
			return {
				ims: [
					'https://sanfuzhide.oss-cn-hangzhou.aliyuncs.com/test/hua1.png',
					'https://sanfuzhide.oss-cn-hangzhou.aliyuncs.com/test/hua2.png',
					'https://sanfuzhide.oss-cn-hangzhou.aliyuncs.com/test/hua3.png',
					'https://sanfuzhide.oss-cn-hangzhou.aliyuncs.com/test/hua4.png',
				],
				active: 0,
				nameQurey:{
					flowerName:this.flowerr,
					anonymousAvatar:'https://sanfuzhide.oss-cn-hangzhou.aliyuncs.com/test/hua1.png'
				}
			};
		},
		watch:{
			flowerr(){
				this.nameQurey.flowerName = this.flowerr
			}
		},
		methods:{
			//提交
			async submit(){
				if(this.nameQurey.flowerName.length > 0){
					let {code} = await this.$post('/user/updateUserInfo',this.nameQurey)
					if(code == 200){
						uni.setStorageSync('flowerName',this.nameQurey.flowerName)
						this.showfalse()
					}
				}else{
					uni.showToast({
						title: '花名不能为空',
						icon: 'none'
					})
				}
				
				
			},
			showfalse(){
				this.$emit('func',this.nameQurey.flowerName)
			},
			//修改头像
			change(id) {
				this.nameQurey.anonymousAvatar = this.ims[id]
				this.active = id
			}
		}
	}
</script>

<style lang="scss">
.mask{
		min-height: 100vh;
		background: rgba(0,0,0,.4);
		.car{
			width: 526rpx;
			height: 746rpx;
			background-image: url('https://sanfuzhide.oss-cn-hangzhou.aliyuncs.com/test/bc.png');
			background-repeat: no-repeat;
			background-size: 100% 100%;
			.wenan{
				margin-top: 233rpx;
				.icon{
					width: 368rpx;
					height: 81rpx;
				}
				.icon1{
					width: 418rpx;
					height: 28rpx;
					
				}
				.icon2{
					margin-top: 26rpx;
					width: 302rpx;
					height: 28rpx;
				}
			}
			.touxiang{
				margin-top: 70rpx;
				.coun{
					.left{
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #333333;
					}
					.right{
						.borde{
							width: 78rpx;
							height: 78rpx;
							border-radius: 50%;
							border: 4rpx solid #0265EB;
							margin-left: 18rpx;
							.ic{
								width: 72rpx;
								height: 72rpx;
							}
						}
						.ico{
							width: 72rpx;
							height: 72rpx;
							margin-left: 18rpx;
						}
					}
				}
			}
			.huaname{
				padding: 0 30rpx;
				margin-top: 32rpx;
				.tinm{
					height: 72rpx;
					width: 100%;
					.label{
						margin-right: 18rpx;
						font-weight: 500;
						color: #333333;
						font-size: 28rpx;
					}
					.input{
						height: 100%;
						width: 100%;
						border-bottom: 1rpx solid rgba(0,0,0,.12);
						input{
							width: 100%;
						}
					}
				}
			}
			.notice{
				font-weight: 400;
				color: #999999;
				font-size: 20rpx;
				line-height: 1;
				margin-top: 10rpx;
				margin-left: 30rpx;
			}
			.botton{
				margin-top: 40rpx;
				.zuo{
					width: 204rpx;
					height: 60rpx;
					border: 1rpx solid #666666;
					border-radius: 30rpx;
					margin-right: 20rpx;
					line-height: 1;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
				}
				.you{
					background: linear-gradient(90deg, #2F93FE, #171EBC);
					width: 204rpx;
					height: 60rpx;
					border-radius: 30rpx;
					line-height: 1;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #FFFFFF;
					box-shadow: 0px 5px 5px rgba(12,108,240, .4);
				}
			}
		}
	}
</style>
